<template>
    <el-menu :router="true" class="el-menu-demo" background-color="#393e46" text-color="#fff" active-text-color="#ffd04b">
        <template v-for="item in myMenus" :key="item.path">
            <el-menu-item v-if="!item.children" :index="item.path">
                <template #title>
                    <el-icon>
                        <message />
                    </el-icon>
                    {{item.name}}
                </template>
            </el-menu-item>
            <el-sub-menu v-else :index="item.path">
                <template #title>
                    <el-icon>
                        <message />
                    </el-icon>
                    {{item.name}}
                </template>
                <el-menu-item v-for="item2 in item.children" :index="item2.path">{{item2.name}}</el-menu-item>
            </el-sub-menu>
        </template>
    </el-menu>
</template>

<script lang='ts' setup>
import { Menu as Message } from '@element-plus/icons-vue'
import { onMounted } from "vue"
const myMenus = ref([])
onMounted(() => {
    const menus = JSON.parse(localStorage.getItem("menus") || "[]")
    console.log(menus);
    myMenus.value = menus
})

</script>

<style lang='scss' scoped></style>